import '@antv/x6-vue-shape'
import { Addon, Graph } from '@antv/x6'
// 拖拽生成四边形
export const startDragToGraph = (graph, type, e) => {
    var node = null
    if (type === '矩形') {
        node = graph.createNode({
            width: 100, // 节点的宽度
            height: 40, // 节点的高度
            attrs: {
                label: {
                    text: type,
                    fill: '#000000',
                    fontSize: 14,
                    textWrap: {
                        width: -10,
                        height: -10,
                        ellipsis: true
                    }
                },
                body: {
                    stroke: '#000000',
                    strokeWidth: 1,
                    fill: '#ffffff'
                }
            },
            ports: ports
        })
    } else if (type === '正方形') {
        node = graph.createNode({
            width: 60, // 节点的宽度
            height: 60, // 节点的高度
            attrs: {
                label: {
                    text: type,
                    fill: '#000000',
                    fontSize: 14,
                    textWrap: {
                        width: -10,
                        height: -10,
                        ellipsis: true
                    }
                },
                body: {
                    stroke: '#000000',
                    strokeWidth: 1,
                    fill: '#ffffff'
                }
            },
            ports: ports
        })
    } else if (type === '圆') {
        node = graph.createNode({
            // position: 'top',
            attrs: {
                width: 60,
                height: 60,
                label: {
                    text: type,
                    fill: '#000000',
                    fontSize: 14,
                    textWrap: {
                        width: -10,
                        height: -10,
                        ellipsis: true
                    }
                },
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff'
                }
            },
            ports: ports
        })
    } else if (type === '自定义') {
        node = graph.createNode({
            width: 80,
            height: 80,
            attrs: {
                // 节点里面具有的数据结构以及样式
                body: {
                    // stroke: 'rgba(95,148,255,0.0)',
                    stroke: '#5f95ff',
                    strokeWidth: 1,
                    fill: 'rgba(95,148,255,0.0)'
                },
                image: {
                    // 'xlink:href': require('../../assets/img/sc.png'),
                    // 自定义格式里面图片的样式要这样引入
                    width: 50,
                    height: 50,
                    x: 12,
                    y: 12
                    // 定义一个组合节点的每一个元素的大小和位置
                },
                // title: {
                //   text: '标题',
                //   fill: '#eee',
                //   sontSize: 20,
                //   x: 40,
                //   y: 14
                // },
                text: {
                    text: '水厂符号',
                    x: 0,
                    y: 32
                }
            },
            markup: [
                // 定义渲染节点/边使用的SVG/html片段
                {
                    tagName: 'rect',
                    // 渲染出来一个rect的svg元素
                    selector: 'body'
                    // svg元素的唯一标识,通过该唯一标识为该元素置定属性样式
                }, {
                    tagName: 'image',
                    // 渲染一个image的svg元素
                    selector: 'image'
                },
                // {
                //     tagName: 'text',
                //     // 渲染一个text元素
                //     selector: 'title'
                // },
                {
                    tagName: 'text',
                    selector: 'text'
                }
            ],
            ports: ports
        })
    }
    const dnd = new Addon.Dnd({ target: graph })
    console.log(node);
    dnd.start(node, e)
}
// 下面是锚点的代码。 知道就行了 我就不一一写了。
const ports = {
    groups: {
        // 输入链接桩群组定义
        top: {
            position: 'top',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff'
                }
            }
        },
        // 输出链接桩群组定义
        bottom: {
            position: 'bottom',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff'
                }
            }
        },
        left: {
            position: 'left',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff'
                }
            }
        },
        right: {
            position: 'right',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff'
                }
            }
        }
    },
    items: [
        {
            id: 'port1',
            group: 'top'
        },
        {
            id: 'port2',
            group: 'bottom'
        },
        {
            id: 'port3',
            group: 'left'
        },
        {
            id: 'port4',
            group: 'right'
        }
    ]
}